<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>视频播放</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    :root {
      --primary-color: #3498db;
      --primary-dark: #2980b9;
      --bg-dark: #0a0a0a;
      --bg-darker: #0a0a0a;
      --header-bg: #FCF1DD;
      --text-light: #ce1b1b;
      --text-dim: #aaaaaa;
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      margin: 0;
      font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
      background: #FCF1DD;
      color: var(--text-light);
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow: hidden;
    }
    
    header {
      width: 100%;
      padding: 16px 24px;
      background: var(--header-bg);
      color: var(--text-light);
      font-size: 20px;
      font-weight: 600;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      display: flex;
      align-items: center;
      z-index: 10;
    }
    
    .back-button {
      margin-right: 15px;
      color: var(--primary-color);
      cursor: pointer;
      transition: transform 0.2s ease;
      font-size: 18px;
    }
    
    .back-button:hover {
      transform: translateX(-3px);
    }
    
    main {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 30px;
      position: relative;
    }
    
    .video-container {
      width: 100%;
      max-width: 1200px;
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0,0,0,0.5);
      background: var(--bg-darker);
      transition: transform 0.3s ease;
    }
    
    .video-container:hover {
      transform: scale(1.01);
    }
    
    video {
      width: 100%;
      display: block;
      background: #000;
    }
    
    video::-webkit-media-controls-panel {
      background-image: linear-gradient(transparent, rgba(0,0,0,0.7));
    }
    
    video::-webkit-media-controls-play-button {
      background-color: var(--primary-color);
      border-radius: 50%;
    }
    
    .loading {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: var(--primary-color);
      font-size: 24px;
      display: none;
    }
    
    .video-info {
      padding: 15px 20px;
      background: rgba(0,0,0,0.3);
      border-top: 1px solid rgba(255,255,255,0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .video-title {
      font-size: 16px;
      font-weight: 500;
    }
    
    .video-meta {
      color: var(--text-dim);
      font-size: 14px;
    }
    
    @media (max-width: 768px) {
      header {
        padding: 12px 16px;
        font-size: 18px;
      }
      
      main {
        padding: 15px;
      }
      
      .video-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }
    }
    
    /* 错误信息样式 */
    .error-message {
      text-align: center;
      padding: 30px;
      background: rgba(255,0,0,0.1);
      border-radius: 8px;
      border-left: 4px solid #f55;
      max-width: 500px;
      margin: 0 auto;
    }
    
    .error-message i {
      font-size: 40px;
      color: #f55;
      margin-bottom: 15px;
      display: block;
    }
    
    .error-message p {
      font-size: 18px;
      margin-bottom: 15px;
    }
    
    .error-message button {
      background: var(--primary-color);
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      transition: background 0.2s;
    }
    
    .error-message button:hover {
      background: var(--primary-dark);
    }
  </style>
</head>
<body>
  <header>
    <span class="back-button" onclick="goBack()"><i class="fas fa-arrow-left"></i></span>
    <span id="videoName">正在加载...</span>
  </header>
  
  <main>
    <div class="video-container">
      <video id="player" controls autoplay></video>
      <div class="video-info">
        <div class="video-title" id="videoTitle">视频标题</div>
        <div class="video-meta">
          <span id="currentDate"></span>
        </div>
      </div>
    </div>
    <div class="loading" id="loading">
      <i class="fas fa-spinner fa-spin"></i>
    </div>
  </main>

  <script>
    // 获取当前日期
    const now = new Date();
    document.getElementById('currentDate').textContent = now.toLocaleDateString('zh-CN');
    
    // 显示加载状态
    const loadingEl = document.getElementById('loading');
    loadingEl.style.display = 'block';
    
    // 获取 URL 参数
    const params = new URLSearchParams(window.location.search);
    const name = params.get('name');
    
    // 返回上一页
    function goBack() {
      window.history.back();
    }
    
    // 视频加载完成事件
    document.getElementById('player').addEventListener('loadeddata', function() {
      loadingEl.style.display = 'none';
    });
    
    // 视频加载错误事件
    document.getElementById('player').addEventListener('error', function() {
      loadingEl.style.display = 'none';
      showError('视频加载失败，请检查视频文件是否存在');
    });

    if (name) {
      // 设置视频路径
      const src = `/VideoAndBlessings/videos/${name}`;
      document.getElementById('player').src = src;

      // 设置标题和左上角名称（去掉扩展名）
      const cleanName = name.replace(/\.[^/.]+$/, "");
      document.title = cleanName;
      document.getElementById('videoName').textContent = cleanName;
      document.getElementById('videoTitle').textContent = cleanName;
    } else {
      showError('未找到视频');
    }
    
    // 显示错误信息
    function showError(message) {
      const main = document.querySelector('main');
      main.innerHTML = `
        <div class="error-message">
          <i class="fas fa-exclamation-triangle"></i>
          <p>${message}</p>
          <button onclick="goBack()">返回上一页</button>
        </div>
      `;
    }
  </script>
</body>
</html>
